<template>
  <div class="app-container">
    <el-card :style="{ borderRadius: '5px' }">
      <div class="filter-container">
        <el-input
          v-model="listQuery.name"
          placeholder="名称"
          style="width: 150px; margin-right: 10px"
          @keyup.enter.native="handleFilter"
        />
        <el-input
          v-model="listQuery.code"
          placeholder="编码"
          style="width: 150px; margin-right: 10px"
          @keyup.enter.native="handleFilter"
        />
        <el-button
          v-waves
          type="primary"
          style="margin-top: 10px"
          plain
          icon="el-icon-search"
          @click="handleFilter"
          >搜索</el-button
        >
        <el-button
          type="primary"
          style="margin-top: 10px"
          plain
          icon="el-icon-plus"
          @click="handleAdd"
          >添加</el-button
        >
      </div>
    </el-card>
    <el-card :style="{ marginTop: '10px', borderRadius: '5px' }">
      <el-table
        v-loading.body="!listLoading"
        :header-row-style="{ height: '70px' }"
        :header-cell-style="{
          color: '',
          fontSize: '',
          backgroundColor: '#dfe6ec',
        }"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
        tooltip-effect="dark"
      >
        <el-table-column label="员工姓名" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>

        <el-table-column label="员工编码" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.code }}</template>
        </el-table-column>

        <el-table-column
          label="创建时间"
          align="center"
          width="180px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="300px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              plain
              @click="handleUpdate(scope.row)"
              >编辑</el-button
            >
            <!-- <el-button
              size="mini"
              type="danger"
              plain
              @click="handleDel(scope.row)"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <div v-show="listLoading" class="pagination-container">
        <el-pagination
          :current-page.sync="listQuery.currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="9"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible1"
      width="800px"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="commonInfo"
        label-width="100px"
      >
        <el-form-item label="员工姓名:" prop="name" label-width="160px">
          <el-input v-model="commonInfo.name" style="width: 350px" />
        </el-form-item>

        <el-form-item label="员工编码:" prop="code" label-width="160px">
          <el-input v-model="commonInfo.code" style="width: 350px" />
        </el-form-item>

        <el-form-item label="密码:" prop="password" label-width="160px">
          <el-input
            v-model="commonInfo.password"
            style="width: 350px"
            show-password
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelData('form')" type="primary" plain
          >取 消</el-button
        >
        <el-button
          v-if="dialogStatus === 'create'"
          type="primary"
          plain
          @click.native.prevent="createData('form')"
          >确 定</el-button
        >
        <el-button
          v-else
          type="primary"
          plain
          @click.native.prevent="updateData('form')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import waves from "@/directive/waves"; // waves directive
import {
  fetchList,
  saveObj,
  updateObj,
  uploads,
  delObj,
  getObj,
} from "@/api/system/sysUser";

import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
export default {
  name: "Common",
  directives: {
    waves,
  },
  data() {
    return {
      dateFil: [],
      commonInfo: {},
      loading: false,
      dialogFormVisible1: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "创建",
      },
      name: "",
      importPanel: false,
      importLoading: null,
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        currentPage: 1,
        pageSize: 10,
      },
      rules: {
        name: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
        code: [{ required: true, message: "请输入员工编码", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  watch: {
    $route() {
      this.getList();
    },
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    handleAdd() {
      this.commonInfo = {};
      this.dialogFormVisible1 = true;
      this.dialogStatus = "create";
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.currentPage = val;
      this.getList();
    },
    createData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          saveObj(this.commonInfo).then(() => {
            this.getList();
            this.dialogFormVisible1 = false;
            this.$notify({
              title: "成功",
              message: "操作成功",
              type: "success",
              duration: 2000,
            });
          });
        }
      });
    },
    handleUpdate(row) {
      this.commonInfo = {
        id: row.id,
        name: row.name,
        password: row.password,
        code: row.code,
        department: row.department,
        address: row.address,
        roleCode: row.roleCode,
        phone: row.phone,
      };
      this.dialogStatus = "update";
      this.dialogFormVisible1 = true;
    },
    updateData() {
      delete this.commonInfo.createTime;
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          updateObj(this.commonInfo).then(() => {
            this.getList();
            this.dialogFormVisible1 = false;
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success",
              duration: 2000,
            });
          });
        }
      });
    },
    cancelData() {
      this.commonInfo = {};
      this.dialogFormVisible1 = false;
      this.$refs["dataForm"].resetFields();
    },
    handleDel(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delObj({ ids: row.id }).then((res) => {
          if (res.statusCode === 8201) {
            this.handleFilter();
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000,
            });
          } else {
            this.$notify({
              title: "失败",
              message: "删除失败",
              type: "success",
              duration: 2000,
            });
          }
        });
      });
    },
    getList() {
      this.listLoading = false;
      fetchList(this.listQuery).then((response) => {
        this.list = response.data.records;

        this.total = response.data.total;
        this.listLoading = true;
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
  },
};
</script>
<style></style>
